﻿// 获取歌词模块
const bigBox = document.querySelector(".bigBox");
// 获取播放器 div
const box = document.querySelector(".box");
// 获取播放器
const audio = document.querySelector(".bigBox>.box>#audio");
// 获取文本内容块
const text = document.querySelector(".bigBox>.lyricsList>.nav>.text");
// 获取标题
const title = document.querySelector(".bigBox>.lyricsList>.title>h1");
// 获取歌曲列表
const playList = document.querySelector(".playList>.content>ul");
// 获取上一首按钮
const left = document.querySelector(".box>#left");
// 获取下一首按钮
const right = document.querySelector(".box>#right");
// 获取 歌词列表
const floatingDiv = document.querySelector("#floatingDiv");
// 获取 歌词
const lyricsList = document.querySelector(".lyricsList");
// 获取 定位
const backToTop = document.querySelector("#backToTop");
// 获取表单
const searchForm = document.querySelector("#searchForm");
// 获取 input
const searchInput = document.querySelector("#searchInput");
// 获取 评论信息
const message = document.querySelector(".message");
// 获取 评论信息按钮
const detailButton = document.querySelector("#detail>button");
// 获取 发表评论按钮
const postCommentButton = document.querySelector("#postCommentButton");
// 获取 评论框
const commentForm = document.querySelector("#commentForm");
// 获取 关闭评论框按钮
const closeButton = document.querySelector(".close-button");
// 获取 关闭评论框按钮
const push = document.querySelector("#push");
// 获取 评论框姓名标签
const commentFormInput = document.querySelector(".comment-form>#commentName");
// 获取 评论框内容标签
const commentFormTextarea = document.querySelector(".comment-form textarea");

// 歌曲列表
const arr = [];

// 评论信息列表
let commentsArr = [];

// 请求端口
const API_BASE_URL = "https://hedgehogcat.cn/myMusic/music";

// 默认歌词是可以滚动的状态
let mouseInText = true;

// 等 5 秒后才能换网页标题
let titleFlag = false;

// 获取 URL 中的查询参数
const urlParams = new URLSearchParams(window.location.search);
// 尝试从查询参数中获取 mp3Index 的值
let mp3Index = urlParams.get("mp3Index");
// 是否是分享状态
let isShare = false;
// 默认都是英文歌曲
let SongType = "英文";

// 格式化时间戳函数（各种奇怪的类型都可以识别）
function parseTime(timeStr) {
  // 检查 timeStr 是否为 undefined 或 null
  if (typeof timeStr === "undefined" || timeStr === null) {
    // 退出函数
    return;
  }

  // 尝试直接匹配时间字符串，首先清理并去除不必要的字符
  try {
    // 如果时间字符串以方括号包围，则去除方括号并清理多余空格
    if (timeStr.startsWith("[") && timeStr.endsWith("]")) {
      timeStr = timeStr.slice(1, -1).trim(); // 去除方括号并清理前后多余的空格
    }

    // 移除所有空白字符
    let cleanTime = timeStr.replace(/\s/g, "");

    // 正则表达式允许两位数字表示分钟，后面跟随一个冒号，然后是两位数字表示秒，秒可以跟有小数点和任意位数的毫秒
    const timePattern = /^(\d{2}):(\d{1,2}(?:\.\d+)?)$/;
    const match = cleanTime.match(timePattern);

    if (!match) {
      throw new Error(`Invalid time format: ${timeStr}`);
    }

    // 提取分钟和秒（包括可能存在的毫秒）
    let [_, minutesPart, secondsPart] = match;

    // 补充秒数前面的0，如果它是一位数字
    if (secondsPart.length < 3) {
      // 检查是否为一位数秒数
      secondsPart = `0${secondsPart}`;
    }

    // 分割秒部分为秒和剩余的毫秒部分
    let [seconds, milliseconds = "0"] = secondsPart.split(".");

    // 将分钟、秒和毫秒转换为浮点数
    const minutesAsNumber = parseFloat(minutesPart);
    const secondsAsNumber = parseFloat(seconds);
    const millisecondsAsNumber = parseFloat(`0.${milliseconds}`); // 处理任意长度的小数部分

    // 验证分钟、秒和毫秒都是有效且合理的数值
    validateTimeValues(
      minutesAsNumber,
      secondsAsNumber,
      millisecondsAsNumber,
      timeStr
    );

    // 计算总秒数并返回
    let totalSeconds =
      minutesAsNumber * 60 + secondsAsNumber + millisecondsAsNumber;

    // 根据歌曲类型调整时间戳
    if (SongType === "英文") {
      // 对于英文歌曲，提前0.6秒，但确保不会小于0秒
      totalSeconds = Math.max(0, totalSeconds - 0.6);
    } else {
      // 对于中文歌曲，提前1秒，但确保不会小于0秒
      totalSeconds = Math.max(0, totalSeconds - 1.0);
    }

    return totalSeconds;
  } catch (error) {
    console.warn(error.message);

    // 使用正则表达式去掉所有非数字、冒号和点的字符作为备选方案
    const fallbackCleanTime = timeStr.replace(/[^0-9.:]/g, "");

    // 再次尝试解析清理后的时间字符串
    return parseFallback(fallbackCleanTime);
  }
}

function parseFallback(cleanTime) {
  // 正则表达式允许两位数字表示分钟，后面跟随一个冒号，然后是两位数字表示秒，秒可以跟有小数点和任意位数的毫秒
  const timePattern = /^(\d{2}):(\d{1,2}(?:\.\d+)?)$/;
  const match = cleanTime.match(timePattern);

  if (!match) {
    throw new Error(`Invalid time format after cleanup: ${cleanTime}`);
  }

  // 提取分钟和秒（包括可能存在的毫秒）
  let [_, minutesPart, secondsPart] = match;

  // 补充秒数前面的0，如果它是一位数字
  if (secondsPart.length < 3) {
    // 检查是否为一位数秒数
    secondsPart = `0${secondsPart}`;
  }

  // 分割秒部分为秒和剩余的毫秒部分
  let [seconds, milliseconds = "0"] = secondsPart.split(".");

  // 将分钟、秒和毫秒转换为浮点数
  const minutesAsNumber = parseFloat(minutesPart);
  const secondsAsNumber = parseFloat(seconds);
  const millisecondsAsNumber = parseFloat(`0.${milliseconds}`); // 处理任意长度的小数部分

  // 验证分钟、秒和毫秒都是有效且合理的数值
  validateTimeValues(
    minutesAsNumber,
    secondsAsNumber,
    millisecondsAsNumber,
    cleanTime
  );

  // 计算总秒数并返回
  return minutesAsNumber * 60 + secondsAsNumber + millisecondsAsNumber;
}

function validateTimeValues(minutes, seconds, milliseconds, timeStr) {
  if (
    isNaN(minutes) ||
    isNaN(seconds) ||
    isNaN(milliseconds) ||
    !isFinite(minutes) ||
    !isFinite(seconds) ||
    !isFinite(milliseconds) ||
    minutes < 0 ||
    seconds < 0 ||
    seconds >= 60
  ) {
    throw new Error(`Invalid number in time string: ${timeStr}`);
  }
}
// 以上都是格式化时间函数

// 判断是不是移动端
function isMobileDevice() {
  // 检查用户代理字符串
  const userAgentCheck =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );

  // 检查屏幕宽度
  const widthCheck = window.innerWidth <= 768;

  // 如果任一条件满足，则认为是移动设备
  return userAgentCheck || widthCheck;
}

// 传一个歌曲路径，返回歌曲和歌手
function returnSongArtist(songString) {
  const songArtist = songString.split(".mp3")[0];
  const match = songArtist.match(/^(.+) - (.+)$/);
  return match ? [match[1], match[2]] : ["", ""];
}

// 渲染歌曲列表函数
function playListLoad() {
  // 获取现有的 li 元素列表
  const existingItems = Array.from(playList.children);
  const fragment = document.createDocumentFragment();

  arr.forEach((item, i) => {
    let li = existingItems[i];

    if (!li) {
      // 如果没有对应的 li 元素，则创建新的 li 元素
      li = document.createElement("li");
      li.dataset.id = i;

      // 创建 span 元素并添加到 li 中
      const playSongSpan = document.createElement("span");
      playSongSpan.className = "playSong";
      li.appendChild(playSongSpan);

      const playArtistSpan = document.createElement("span");
      playArtistSpan.className = "playArtist";
      li.appendChild(playArtistSpan);

      fragment.appendChild(li);
    }

    // 更新 li 的内容
    if (typeof item.src !== "string" || !item.src.includes(".mp3")) {
      console.warn(
        "Invalid song string format:",
        "color: goldenrod;",
        item.src
      );
      li.querySelector(".playSong").textContent = "未知歌曲";
      li.querySelector(".playArtist").textContent = "未知艺术家";
    } else {
      // 调用 returnSongArtist 获取歌手和歌名
      const [artist, title] = returnSongArtist(item.src);
      li.querySelector(".playSong").textContent = title;
      li.querySelector(".playArtist").textContent = artist;
    }
  });

  // 将新创建的元素插入到 DOM 中
  playList.innerHTML = ""; // 清空现有内容
  playList.appendChild(fragment);

  // 移除多余的旧元素
  while (playList.children.length > arr.length) {
    playList.lastChild.remove();
  }

  // 使用事件委托处理点击事件（确保只添加一次） li 单击事件
  function handlePlaylistClick(e) {
    let targetElement = e.target;

    // 如果点击的是 <span> 元素，则获取其父级 <li> 元素
    if (targetElement.tagName === "SPAN") {
      targetElement = targetElement.parentElement;
    }

    // 确保最终处理的是 <li> 元素
    if (targetElement.tagName === "LI") {
      const id = targetElement.dataset.id;

      // 确保 data-id 存在且有效
      if (id !== undefined && !isNaN(id)) {
        const index = parseInt(id, 10);
        mp3Index = index;
        show(mp3Index); // 显示选中的歌曲

        // 更新当前播放的歌曲索引并刷新显示
        updateCurrentSong(mp3Index);

        // 定位到当前歌曲位置
        scrollToCurrentSong();

        // 当前歌曲动画切换
        playState();
      }
    }
  }

  // 确保点击事件监听器只添加一次
  if (!playList.hasAttribute("data-click-handler-added")) {
    playList.addEventListener("click", handlePlaylistClick);
    playList.setAttribute("data-click-handler-added", "");
  }
}

// 渲染函数
function show(index) {
  // 显示 歌词提示信息
  text.innerHTML = `
    <div class="loadingPrompts">
      <p>加载歌词中...</p>
    </div>  
  `;

  // 获取标题的歌曲、歌手
  const songEumer = document.querySelector(".song-lyrics");
  const artistEumer = document.querySelector(".artist");

  const src = arr[index].src;
  const lyricsId = arr[index].id;

  const songArtistArr = returnSongArtist(src);

  if (titleFlag) {
    document.title = songArtistArr[1];
  }

  songEumer.innerHTML = songArtistArr[1]; // 歌曲名
  artistEumer.innerHTML = songArtistArr[0]; // 歌手名

  // 修改MP3路径
  audio.src = `./mp3/${src}`;

  // 渲染完成就自动播放
  if (audio.paused) {
    audioPlay();
    playButton.querySelector("i").classList.remove("fas", "fa-play");
    playButton.querySelector("i").classList.add("fas", "fa-pause");
  } else {
    audio.pause();
    playButton.querySelector("i").classList.remove("fas", "fa-pause");
    playButton.querySelector("i").classList.add("fas", "fa-play");
  }

  // 样式修改
  updateCurrentSong(index);

  // 获取歌曲歌词
  (function getLyrics() {
    axios
      .get(API_BASE_URL + "/lyrics/" + lyricsId)
      .then((res) => {
        // 解析数据并存储到对象中
        let lyricsData;
        if (res.data.data) {
          lyricsData = res.data.data;
        } else {
          console.error(res.data.msg);
        }

        // 判断是否是英文歌曲
        if (lyricsData.en) {
          SongType = "英文";
        } else {
          SongType = "中文";
        }

        // 获取当前 歌词对象
        let hasEnglish = lyricsData.en;
        let hasChinese = lyricsData.zh;

        if (hasEnglish === undefined || hasChinese === undefined) {
          console.error("Error: Either English or Chinese lyrics is undefined");
          return;
        }

        // 将字符串转换为 JSON 对象
        try {
          hasEnglish = JSON.parse(hasEnglish);
          hasChinese = JSON.parse(hasChinese);
        } catch (error) {
          console.error("Error parsing JSON:", error);
          return;
        }

        let textObj = {}; // 最终使用的歌词对象
        if (hasEnglish && hasChinese) {
          // 同时存在中英文歌词，优先使用英文，并配对中文
          textObj = hasEnglish;
        } else if (hasEnglish) {
          // 只有英文歌词
          textObj = hasEnglish;
        } else if (hasChinese) {
          // 只有中文歌词
          textObj = hasChinese;
        }

        // 使用 DocumentFragment 提高 DOM 操作效率
        const fragment = document.createDocumentFragment();

        // 遍历歌词对象
        for (let key in textObj) {
          const p = document.createElement("p");
          p.dataset.time = `${key}`;

          let enLyric = hasEnglish ? textObj[key] : null;
          let zhLyric = hasChinese ? hasChinese[key] : null;

          // 构建歌词 HTML 内容，同时确保只有有效的歌词才会被添加
          const validEnLyric = enLyric && enLyric.trim();
          const validZhLyric = zhLyric && zhLyric.trim();

          p.innerHTML = `
          ${validEnLyric ? `<span>${validEnLyric}</span>` : ""}
          ${validZhLyric ? `<span>${validZhLyric}</span>` : ""}
        `;

          // 如果 p 标签内没有有效内容则不添加
          if (p.childElementCount > 0) {
            fragment.appendChild(p);
          }
        }

        // 异步 渲染歌词
        setTimeout(() => {
          // 清空 歌词加载提示信息
          text.innerHTML = "";
          // 让滚动条还原到顶部
          text.scrollTo(0, 0);
          // 将所有歌词一次性添加到 DOM 中
          text.appendChild(fragment);
          // 歌词渲染加载完成就隐藏滚动条
          text.style.overflow = "hidden";
        }, 100);

        // 日志请求，记录歌曲日志
        setTimeout(() => {
          (function songLog() {
            axios
              .get(API_BASE_URL + "/" + lyricsId)
              .then((res) => {
                // 解析日志数据并存储到日志对象中
                let songLogData;
                if (res.data.data) {
                  songLogData = res.data.data;
                } else {
                  console.error(res.data.msg);
                }
              })
              .catch((error) => {
                console.error("Error fetching data:", error);
              });
          })();

          // 查询评论
          selectComments(arr[index].id);

          // 获取 歌曲 id 标签
          const commentFormInputSongId = document.querySelector(
            ".comment-form>#songId"
          );
          // 修改 歌曲 id 值
          commentFormInputSongId.value = arr[index].id;

          // 修改 提交标题
          document.querySelector("#commentForm>h2").innerHTML =
            "歌曲：" + songArtistArr[1];

          // 自动关闭评论
          if (commentForm.style.visibility === "visible") {
            postCommentButton.click();
          }
        }, 100);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  })();
}

// 音乐列表修改尺寸函数
function playListHeight() {
  // 获取相关 DOM 元素
  const searchBar = document.querySelector(".listTop");
  const playerControls = document.querySelector(".player-container");
  const foot = document.querySelector(".foot");
  const content = document.querySelector(".content");
  const list = document.querySelector("#floatingDiv");

  // 确认所有元素都存在
  if (!searchBar || !playerControls || !foot || !content || !list) {
    return;
  }

  // 获取各部分的高度
  const searchBarHeight = searchBar.offsetHeight;
  const playerControlsHeight = playerControls.offsetHeight;
  const footHeight = foot.offsetHeight;

  // 计算可用高度
  const windowHeight = window.innerHeight;
  const playlistHeight = windowHeight - searchBarHeight - playerControlsHeight;

  // 设置内容区和列表的高度，确保不会出现负值
  const calculatedHeight = Math.max(playlistHeight - footHeight, 0);
  content.style.height = `${calculatedHeight}px`;
  list.style.height = `${calculatedHeight}px`;
}

// 歌词修改尺寸函数
function lyricsListHeight() {
  const lyricsList = document.querySelector(".bigBox>.lyricsList");
  const titleMent = document.querySelector(".bigBox>.lyricsList .title");
  const nav = document.querySelector(".bigBox>.lyricsList .nav");
  const playerContainer = document.querySelector(".player-container");
  const text = document.querySelector(".bigBox>.lyricsList .text"); // 确保此选择器正确

  // 确认所有元素都存在
  if (!lyricsList || !titleMent || !nav || !playerContainer || !text) {
    return;
  }

  // 获取并解析样式属性
  const computedStyleTitle = window.getComputedStyle(titleMent);
  const computedStylePlayer = window.getComputedStyle(playerContainer);

  // 解析高度和边距等属性，提供默认值以防 NaN
  const titleTotalHeight =
    parseFloat(computedStyleTitle.height) +
    (parseFloat(computedStyleTitle.paddingTop) || 0) +
    (parseFloat(computedStyleTitle.paddingBottom) || 0);

  const playerTotalHeight =
    parseFloat(computedStylePlayer.height) +
    (parseFloat(computedStylePlayer.marginTop) || 0) +
    (parseFloat(computedStylePlayer.marginBottom) || 0) +
    (parseFloat(computedStylePlayer.paddingTop) || 0) +
    (parseFloat(computedStylePlayer.paddingBottom) || 0);

  const windowHeight = window.innerHeight;
  const lyricsMaxHeight = windowHeight - (titleTotalHeight + playerTotalHeight);

  // 应用样式
  if (isMobileDevice()) {
    nav.style.height = `${Math.max(lyricsMaxHeight - 40, 0)}px`;
    text.style.height = `${Math.max(lyricsMaxHeight - 40, 0)}px`;
  } else {
    nav.style.height = `${Math.max(lyricsMaxHeight - 30, 0)}px`;
    text.style.height = `${Math.max(lyricsMaxHeight - 30, 0)}px`;
  }
}

// 改变尺寸就调整
window.addEventListener("resize", () => {
  // 调整歌曲列表高度
  playListHeight();

  // 调整歌词高度
  lyricsListHeight();
});

// 加载完成后执行
window.addEventListener("load", function () {
  /**
   *  禁用 右键菜单 和其他其他快捷键
   */
  this.setTimeout(() => {
    // 禁用右键菜单
    window.oncontextmenu = function () {
      return false;
    };

    // 禁用 F12 和其他快捷键
    window.onkeydown =
      window.onkeyup =
      window.onkeypress =
        function (event) {
          if (
            event.keyCode === 123 ||
            (event.ctrlKey && event.shiftKey && event.keyCode === 73)
          ) {
            event.preventDefault();
            return false;
          }
        };
  }, 100);

  /**
   * 使用异步的方式加载
   */
  // 歌曲列表优先加载
  this.setTimeout(listLoad, 100);
});

// 歌曲列表加载 函数
function listLoad() {
  /* 请求模块 */
  (function fetch() {
    axios
      .get(API_BASE_URL)
      .then((res) => {
        if (Array.isArray(res.data.data)) {
          // 检查 res.data 是否为数组
          arr.push(...res.data.data); // 使用扩展运算符合并数组

          // 渲染歌曲列表
          playListLoad();

          // 渲染完成后修改列表尺寸
          playListHeight();

          // 加载完成后先点击一下 切换 按钮
          settingsButton.click();

          // 等 5 秒后再替换 网页标题
          this.setTimeout(function () {
            this.document.title = returnSongArtist(arr[mp3Index].src)[1];
            titleFlag = true;
          }, 5000);

          // 如果没有传入 mp3Index 或者它的值不是有效的数字，则设置为 0
          if (mp3Index === null || isNaN(mp3Index)) {
            // 没有参数的情况
            mp3Index = 0;
          } else {
            // 确保 mp3Index 是一个整数
            mp3Index = parseInt(mp3Index, 10);

            // 查找 arr 数组中对象的 id 是否等于 mp3Index
            const index = arr.findIndex((item) => item.id === mp3Index);

            if (index !== -1) {
              // 如果找到了匹配的 id，更新 mp3Index 为该下标
              mp3Index = index;
              // 修改分享状态
              isShare = true;
            } else {
              // 如果没有找到匹配的 id，重置 mp3Index 为 0
              mp3Index = 0;
            }
          }

          // 渲染播放的歌曲信息
          show(mp3Index);

          // 默认设置第一首歌的样式
          updateCurrentSong(mp3Index);

          // 直接定位到当前歌曲位置
          scrollToCurrentSong();

          // 动画显示
          removeChartContainer();

          // 分享的状态直接切换到歌词
          if (isShare !== false) {
            // 切换到歌词
            settingsButton.click();
          }

          // 全部加载完成后 加载动画 异步移除
          setTimeout(removeLoader, 100);
        } else {
          // 如果请求的数据有问题
          console.error(res.data.msg);
        }

        // 其他资源加载 继续异步加载
        this.setTimeout(authoerLoad, 100);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  })();
}

// 其他需要加载的资源 函数
function authoerLoad() {
  // 音乐资源提前加载
  audioLoad();

  // 判断分享状态并调整
  if (isShare !== false) {
    // 进入歌词模式就调整
    lyricsListHeight();
  } else {
    // 进入歌曲列表就调整
    playListHeight();
  }

  /* 其他资源 */

  /* 搜索模块 */
  // 存储原始歌曲列表用于还原
  let originalSongs = [...arr];

  // 阻止表单默认行为
  searchForm.addEventListener("submit", (e) => {
    e.preventDefault();
    // 提交就分享当前播放的歌曲
    updateUrlAndCopy(arr[mp3Index].id);
  });

  // 添加 input 事件监听器
  searchInput.addEventListener("input", debounce(handleSearch, 300));

  function handleSearch() {
    const query = searchInput.value.trim().toLowerCase();
    if (query === "") {
      // 如果输入框为空，则还原到原始状态
      restoreOriginalState();
      return;
    }

    const results = arr
      .filter(
        (song) =>
          song &&
          typeof song.src === "string" &&
          song.src
            .split(".mp3")[0]
            .replace("-", " ")
            .toLowerCase()
            .includes(query)
      )
      .map((song, index) => ({
        ...song,
        originalIndex: arr.indexOf(song),
      }));

    displaySearchResults(results);
  }

  // 查询操作
  function findNewIndexInSearchResults(originalIndex) {
    const query = searchInput.value.trim().toLowerCase();

    if (query === "") {
      return originalIndex;
    }

    const results = arr.filter(
      (song) =>
        song &&
        typeof song.src === "string" &&
        song.src
          .split(".mp3")[0]
          .replace("-", " ")
          .toLowerCase()
          .includes(query)
    );

    return results.findIndex((song) => arr.indexOf(song) === originalIndex);
  }

  function restoreOriginalState() {
    displaySearchResults(
      originalSongs.map((song, index) => ({
        ...song,
        originalIndex: index,
      }))
    );
  }

  function displaySearchResults(results) {
    playList.innerHTML = "";

    if (results.length === 0) {
      playList.innerHTML = `<li><span class="isNore">没有匹配到你输入的歌曲...</li>`;
      return;
    }

    results.forEach((song, newIndex) => {
      const li = document.createElement("li");
      const arr = returnSongArtist(song.src);
      li.innerHTML = `<span class="playSong">${arr[1]}</span><span class="playArtist">${arr[0]}</span>`;
      li.dataset.id = song.originalIndex;
      playList.appendChild(li);

      // 更新当前播放歌曲的样式（如果在新的搜索结果中）
      if (song.originalIndex === mp3Index) {
        updateCurrentSong(song.originalIndex);
      }
    });

    scrollToCurrentSong(); // 定位到当前歌曲位置

    // 当前歌曲动画切换
    playState();
  }

  // 防抖函数，防止频繁调用
  function debounce(func, wait) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  // 下面的因为异步才要放这里，不然获取不到标签会有异常
  // 键盘按下事件
  window.addEventListener("keydown", keydown);
  function keydown(event) {
    const key = event.key;
    const currentVolume = audio.volume;

    if (key === "ArrowUp") {
      // 上箭头键增加音量
      let newVolume = Math.min(currentVolume + 0.1, 1);
      audio.volume = newVolume;
      volumeSlider.value = newVolume;
      if (audio.muted) {
        audio.muted = false;
      }
      updateVolumeIcon(newVolume);
    } else if (key === "ArrowDown") {
      // 下箭头键减少音量
      let newVolume = Math.max(currentVolume - 0.1, 0);
      audio.volume = newVolume;
      volumeSlider.value = newVolume;
      if (newVolume === 0 && !audio.muted) {
        originalVolume = currentVolume; // 保存当前音量
        audio.muted = true;
      }
      updateVolumeIcon(newVolume);
    }
    // 功能左键
    else if (event.code === "ArrowLeft") {
      audio.currentTime -= 10;
    }
    // 功能右键
    else if (event.code === "ArrowRight") {
      audio.currentTime += 10;
    }
  }

  // 键盘抬起事件
  window.addEventListener("keyup", keyup);
  function keyup(event) {
    // J 下键
    if (event.code === "KeyJ") {
      nextButton.click();
    }
    // K 下键
    else if (event.code === "KeyK") {
      prevButton.click();
    }
    // P 键
    else if (event.code === "KeyP") {
      playButton.click();
    }
    // H 键
    else if (event.code === "KeyH") {
      settingsButton.click();
    }
    // L  键 (随机播放)
    else if (event.code === "KeyL") {
      playModeButton.click();
    }
    // I 键 (静音)
    else if (event.code === "KeyI") {
      volumeIcon.click();
    }
    // G 键 (定位到当前音乐)
    else if (event.code === "KeyG") {
      scrollToCurrentSong();
    }
    // M 下键
    else if (event.code === "KeyM") {
      if (detailButton.style.display === "block") {
        detailButton.click();
      }
    }
    // C 键 (定位到当前音乐)
    else if (event.code === "KeyC") {
      if (document.querySelector(".playList").style.display === "block") {
        // 清空搜索框并恢复歌单
        searchInput.value = "";
        restoreOriginalState();
      }
    }
  }

  // 当input获取焦点时，移除键盘事件监听器
  searchInput.addEventListener("focus", function () {
    window.removeEventListener("keydown", keydown);
    window.removeEventListener("keyup", keyup);
  });

  // 当input失去焦点时，添加键盘事件监听器
  searchInput.addEventListener("blur", function () {
    window.addEventListener("keydown", keydown);
    window.addEventListener("keyup", keyup);
  });

  function messageKeyup(event) {
    // M 下键
    if (event.code === "KeyM") {
      detailButton.click();
    }
  }

  // 发表按钮
  postCommentButton.addEventListener("click", function () {
    // 默认的名字
    commentFormInput.value = localStorage.getItem("MessageName");

    // 显示隐藏
    const computedStyle = window.getComputedStyle(commentForm);
    let currentOpacity = parseFloat(computedStyle.getPropertyValue("opacity"));
    if (currentOpacity === 0) {
      commentForm.style.opacity = 1;
      commentForm.style.visibility = "visible"; // 确保元素是可见的
      // 移除 M 快捷键
      window.removeEventListener("keyup", messageKeyup);
    } else {
      commentForm.style.opacity = 0;
      setTimeout(() => {
        commentForm.style.visibility = "hidden"; // 在透明度变为0后隐藏元素
        // 添加 M 快捷键
        window.addEventListener("keyup", messageKeyup);
      }, 300); // 假设过渡时间为300ms
    }
  });

  // 评论详情按钮
  detailButton.addEventListener("click", function () {
    // 调整歌词高度
    lyricsListHeight();

    if (lyricsList.style.display === "block") {
      // 进入评论之后就 重新刷新 评论信息
      const commentFormInputSongId = +document.querySelector(
        ".comment-form>#songId"
      ).value; // 获取 歌曲 id 值

      // 重新渲染歌曲评论信息
      selectComments(commentFormInputSongId);

      // 修改快捷键提示
      detailButton.firstChild.title = "歌词界面（M）";

      // 修改颜色
      detailButton.style.backgroundColor = "#ff7b26";
      detailButton.style.color = "#fff";
      // 显示评论信息
      message.style.display = "block";
      // 隐藏歌词
      lyricsList.style.display = "none";
      // 隐藏播放器
      box.style.display = "none";
      // 修改背景
      bigBox.style.backgroundColor = "#f9e8a4";

      // 移除快捷键
      window.removeEventListener("keydown", keydown);
      window.removeEventListener("keyup", keyup);

      // 添加 M 快捷键
      window.addEventListener("keyup", messageKeyup);
    } else {
      // 修改快捷键提示
      detailButton.firstChild.title = "评论详情（M）";

      // 修改颜色
      detailButton.style.backgroundColor = "#f9e8a4";
      detailButton.style.color = "#4EAFFF";
      // 隐藏评论信息
      message.style.display = "none";
      // 显示歌词
      lyricsList.style.display = "block";
      // 显示播放器
      box.style.display = "block";
      // 修改背景
      bigBox.style.backgroundColor = "transparent";

      // 添加快捷键
      window.addEventListener("keydown", keydown);
      window.addEventListener("keyup", keyup);

      // 移除 M 快捷键
      window.removeEventListener("keyup", messageKeyup);
    }
  });
}

// 音乐资源加载 函数
function audioLoad() {
  // 获取音频元素和显示持续时间的 span 元素
  const durationDisplay = document.querySelector("#duration");

  // 加载完成就修改歌曲总时长
  audio.addEventListener("loadedmetadata", function () {
    if (!isNaN(audio.duration)) {
      durationDisplay.textContent = formatTime(audio.duration);
    }
  });

  // 确保音频开始加载
  audio.load();

  // 先暂停
  audio.pause();

  // 播放器一开始默认是暂停状态
  playButton.querySelector("i").classList.remove("fas", "fa-pause");
  playButton.querySelector("i").classList.add("fas", "fa-play");
}

// 监听音乐自动播放下一首
audio.addEventListener(
  "ended",
  () => {
    // 播放下一首
    nextButton.click();
  },
  false
);

// 监听音频播放时间更新，同步歌词显示
audio.addEventListener("timeupdate", function () {
  const currentTime = audio.currentTime;
  const lyrics = text.querySelectorAll("p");
  let currentLyric = null;

  // 单曲循环结束的时候 让滚动条还原到顶部
  if (currentTime === 0 && playMode === "repeat") {
    // 让滚动条还原到顶部
    setTimeout(() => {
      // 浏览器默认滚动方式
      // text.scrollTo({
      //   top: 0,
      //   left: 0,
      //   behavior: "smooth",
      // });

      // 滚动条还原到顶部
      smoothScroll(0, text);
    }, 500);
  }

  // 查找当前时间对应的歌词
  for (let i = 0; i < lyrics.length; i++) {
    const lyricTime = parseTime(lyrics[i].dataset.time);
    if (currentTime >= lyricTime) {
      currentLyric = lyrics[i];
    } else {
      break;
    }
  }

  if (currentLyric && mouseInText) {
    // 高亮当前歌词
    lyrics.forEach((lyric) => lyric.classList.remove("highlight"));
    currentLyric.classList.add("highlight");

    // 滚动歌词容器，使当前歌词居中
    const containerHeight = text.clientHeight;
    const lyricTop = currentLyric.offsetTop;
    const scrollToPosition = Math.max(0, lyricTop - containerHeight / 2);

    // 开始新的滚动动画
    smoothScroll(scrollToPosition, text);
  } else if (!currentLyric) {
    // 如果没有找到当前歌词（例如音频刚开始），可以移除所有高亮
    lyrics.forEach((lyric) => lyric.classList.remove("highlight"));
  }
});

// 用于追踪滚动状态（每次触发timeupdate事件时都会重置该标志位）
let isScrolling = false;
// 目标位置
let currentTargetY = 0;
// 默认持续时间为222毫秒
let currentDuration = 222;
// 歌词滚动动画函数
function smoothScroll(targetY, text) {
  // 更新目标位置和根据歌曲类型调整滚动持续时间
  currentTargetY = targetY;

  // 调整中文歌词的滚动动画持续时间
  if (SongType === "中文") {
    currentDuration = 500; // 中文歌曲的滚动动画持续时间
  } else {
    currentDuration = 222; // 英文歌曲的滚动动画持续时间
  }

  if (!isScrolling) {
    isScrolling = true;
    animateScroll(text);
  }
}

function animateScroll(text) {
  const startPosition = text.scrollTop;
  const distance = currentTargetY - startPosition;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, distance, currentDuration);
    text.scrollTop = run;

    // 如果时间未达到或超过滚动持续时间且仍在滚动状态，则继续动画
    if (timeElapsed < currentDuration && isScrolling) {
      requestAnimationFrame(animation);
    } else {
      // 当前滚动完成，检查是否有新的滚动请求
      if (scrollQueue.length > 0) {
        const nextScroll = scrollQueue.shift();
        smoothScroll(nextScroll.targetY, nextScroll.text);
      } else {
        isScrolling = false;
      }
    }
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t + b;
    t--;
    return (-c / 2) * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// 简单的队列处理逻辑（如果需要处理多个连续滚动）
let scrollQueue = [];

function queueSmoothScroll(targetY, text) {
  scrollQueue.push({ targetY: targetY, text: text });
  if (!isScrolling) {
    const nextScroll = scrollQueue.shift();
    smoothScroll(nextScroll.targetY, nextScroll.text);
  }
}

// 中断的旧方法
// function smoothScroll(targetY, text) {
//   if (isScrolling) {
//     // 如果已经在滚动，则重置并准备新滚动
//     isScrolling = false; // 先标记为不再继续当前滚动
//   }
//   isScrolling = true;

//   const startPosition = text.scrollTop;
//   const distance = targetY - startPosition;
//   let duration = 222; // 动画持续时间，单位为毫秒（默认持续时间）

//   let startTime = null;

//   // 调整中文歌词的滚动动画持续时间
//   if (SongType === "中文") {
//     duration = 500;
//   }

//   function animation(currentTime) {
//     if (!isScrolling) return; // 如果滚动被标记为停止，则返回不继续动画
//     if (!startTime) startTime = currentTime;
//     const timeElapsed = currentTime - startTime;
//     const run = ease(timeElapsed, startPosition, distance, duration);
//     text.scrollTop = run;
//     if (timeElapsed < duration && isScrolling) requestAnimationFrame(animation);
//     else if (isScrolling) {
//       // 确保只在需要的情况下设置滚动完成
//       isScrolling = false;
//     }
//   }

//   function ease(t, b, c, d) {
//     t /= d / 2;
//     if (t < 1) return (c / 2) * t * t + b;
//     t--;
//     return (-c / 2) * (t * (t - 2) - 1) + b;
//   }

//   requestAnimationFrame(animation);
// }

// 监听的事件
// 监听是否隐藏滚动条
text.addEventListener("mouseenter", function () {
  text.style.overflowY = "auto";
});

// 监听是否隐藏滚动条
text.addEventListener("mouseleave", function () {
  text.style.overflowY = "hidden";
});

// 滚动监听，是否停止歌词滚动
let timeout;
text.addEventListener(
  "scroll",
  function () {
    clearTimeout(timeout); // 清除之前的定时器
    // 歌词滚动关闭
    mouseInText = false;
    // 设置一个新的定时器，当滚动停止后150毫秒执行
    timeout = setTimeout(function () {
      // 歌词滚动开启
      mouseInText = true;
    }, 2000); // 你可以根据需要调整这个时间
  },
  false
);

// 定位到当前歌曲位置
function scrollToCurrentSong() {
  const currentSongLi = document.querySelector(
    `.playList>.content>ul>li[data-id="${mp3Index}"].now_gq`
  );

  if (currentSongLi) {
    // 移除其他列表项的 'fixed-at-top' 样式
    const allLis = document.querySelectorAll(".playList>.content>ul>li");
    allLis.forEach((li) => {
      li.classList.remove("fixed-at-top");
    });

    // 添加 'fixed-at-top' 样式到当前歌曲元素
    currentSongLi.classList.add("fixed-at-top");

    // 获取歌词容器和目标位置
    const container = document.querySelector(".playList>.content>ul");
    const targetPosition = currentSongLi.offsetTop;

    // 计算滚动位置，使得当前歌曲项在容器顶部
    const scrollToPosition = Math.max(0, targetPosition - container.offsetTop);

    // 动态加载滚动
    function smoothScroll(targetY, duration) {
      const startPosition = container.scrollTop;
      const distance = targetY - startPosition;
      let startTime = null;

      function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;

        // 使用线性插值来计算当前位置
        const run = startPosition + distance * (timeElapsed / duration);

        container.scrollTop = run;

        // 如果还未达到目标位置，则继续下一帧动画
        if (timeElapsed < duration) {
          requestAnimationFrame(animation);
        } else {
          // 确保最终位置准确无误
          container.scrollTop = targetY;
        }
      }

      requestAnimationFrame(animation);
    }

    // 设定动画持续时间为222ms（或其他适合你的应用的时间）
    const duration = 500; // 动画持续时间，单位为毫秒
    smoothScroll(scrollToPosition, duration);
  }
}

// 更新当前播放歌曲的样式
function updateCurrentSong(index) {
  // 移除所有高亮样式及现有的 .chart 元素
  const allLis = document.querySelectorAll(".playList>.content>ul>li");
  allLis.forEach((li) => {
    li.classList.remove("now_gq");

    // 移除已有的 .chart 元素以避免重复添加
    const existingChart = li.querySelector(".chart");
    if (existingChart) {
      li.removeChild(existingChart);
    }
  });

  if (index !== undefined && index >= 0) {
    // 使用 data-id 查找当前播放的歌曲项
    const newCurrentSong = document.querySelector(
      `.playList>.content>ul>li[data-id="${index}"]`
    );
    if (newCurrentSong) {
      newCurrentSong.classList.add("now_gq");
    }
  }
}

// 定位按钮单击事件
backToTop.addEventListener("click", (e) => {
  // 阻止默认行为
  e.preventDefault();
  // 定位到当前歌曲位置
  scrollToCurrentSong();
});

// 搜索部分
searchInput.addEventListener("focus", function () {
  var icon = document.querySelector(".search-icon");
  icon.classList.add("show"); // 显示图标
});

searchInput.addEventListener("blur", function () {
  var icon = document.querySelector(".search-icon");
  setTimeout(function () {
    if (!document.activeElement.closest("#searchForm")) {
      // 确保焦点不在表单内部
      icon.classList.remove("show"); // 隐藏图标
    }
  }, 100); // 延迟检查，避免立即失去焦点的情况
});

// 分享当前歌曲 函数
function updateUrlAndCopy(message) {
  const SongId = +document.querySelector(".comment-form>#songId").value;
  // 复制路径（获取输入框的歌词 Id并复制）
  message =
    window.location.origin + window.location.pathname + "?mp3Index=" + SongId;
  let inputObj = document.createElement("input");
  if (isMobileDevice()) {
    // 移动端是 input 复制方式
    inputObj.value = message;
    document.body.appendChild(inputObj);
    inputObj.select();
    inputObj.setSelectionRange(0, inputObj.value.length);
    document.execCommand("Copy");
    document.body.removeChild(inputObj);
  } else {
    // 电脑端是 document 复制方式
    let domObj = document.createElement("span");
    domObj.innerHTML = message;
    document.body.appendChild(domObj);
    let selection = window.getSelection();
    let range = document.createRange();
    range.selectNodeContents(domObj);
    selection.removeAllRanges();
    selection.addRange(range);
    inputObj.setSelectionRange(0, inputObj.value.length);
    document.execCommand("Copy");
    document.body.removeChild(domObj);
  }
}

// 当前歌曲动画动画状态
function playState() {
  // 检查当前是否暂停
  if (audio.paused) {
    // 暂停
    removeChartContainer();
  } else {
    // 播放
    createAndAnimateChartContainer();
  }
}

// 创建动画
function createAndAnimateChartContainer() {
  // 确保 newCurrentSong 已经正确定义并指向正确的 DOM 元素
  const newCurrentSong = document.querySelector(".now_gq"); // 假设这是获取当前歌曲列表项的方式

  if (newCurrentSong) {
    // 检查是否已有 .chart 容器
    let chartContainer = newCurrentSong.querySelector(".chart");

    if (!chartContainer) {
      // 如果没有找到现有的 .chart 容器，则创建一个新的 div.chart 容器
      chartContainer = document.createElement("div");
      chartContainer.className = "chart";

      // 创建三个 bar div 并添加到 chartContainer 中
      for (let i = 0; i < 3; i++) {
        const bar = document.createElement("div");
        bar.className = "bar";
        chartContainer.appendChild(bar);
      }

      // 找到 playSong span
      const playSongSpan = newCurrentSong.querySelector(".playSong");
      if (playSongSpan) {
        // 将 chartContainer 插入到 now_gq 列表项中 playSong span 前面
        newCurrentSong.insertBefore(chartContainer, playSongSpan);
      } else {
        // 如果没有找到 playSong span，则直接添加到列表项末尾
        newCurrentSong.appendChild(chartContainer);
      }
    } else {
      // 如果 .chart 容器已经存在，则清空其内容以准备新的动画
      while (chartContainer.firstChild) {
        chartContainer.removeChild(chartContainer.firstChild);
      }

      // 重新创建三个 bar div 并添加到现有 chartContainer 中
      for (let i = 0; i < 3; i++) {
        const bar = document.createElement("div");
        bar.className = "bar";
        chartContainer.appendChild(bar);
      }
    }

    // 动画逻辑 - 使用 CSS 动画或者 JavaScript 动画库
    // 这里我们假设使用 CSS 动画，并且每个 bar 都有一个初始的动画类
    const bars = chartContainer.querySelectorAll(".bar");
    bars.forEach((bar, index) => {
      // 移除任何现存的动画样式，确保动画从头开始
      bar.style.animation = "";

      // 设置动画延迟启动时间不同，以创造连续的效果
      setTimeout(() => {
        bar.style.animation = `grow ${index + 1}s infinite alternate`; // 示例动画名称
      }, index * 200);
    });
  }
}

// 移除动画
function removeChartContainer() {
  // 确保 newCurrentSong 已经正确定义并指向正确的 DOM 元素
  const newCurrentSong = document.querySelector(".now_gq"); // 假设这是获取当前歌曲列表项的方式
  if (!newCurrentSong) return;

  // 找到 playSong span 并准备在其前插入暂停图标
  const playSongSpan = newCurrentSong.querySelector(".playSong");
  if (playSongSpan) {
    // 获取或创建 .chart 容器
    let chartContainer = playSongSpan.previousElementSibling;
    if (!chartContainer || !chartContainer.classList.contains("chart")) {
      // 创建新的 .chart 容器，并在 playSongSpan 之前插入
      chartContainer = document.createElement("div");
      chartContainer.className = "chart";
      newCurrentSong.insertBefore(chartContainer, playSongSpan);
    } else {
      // 移除 .chart 容器内的所有子元素以避免重复添加
      while (chartContainer.firstChild) {
        chartContainer.removeChild(chartContainer.firstChild);
      }
    }

    // 创建新的 div 和 i 元素，并将 i 元素添加到新的 div 中
    const newDiv = document.createElement("div");
    const iconElement = document.createElement("i");
    iconElement.className = "pause-icon"; // 假设这是暂停图标的类名
    newDiv.appendChild(iconElement);

    // 将新创建的 div 插入到 .chart 容器内部
    chartContainer.appendChild(newDiv);

    // 给 pause-icon 添加点击事件
    iconElement.addEventListener(
      "click",
      function handleClick(event) {
        // 防止默认行为（如果有的话）
        event.preventDefault();

        // 点击播放
        playButton.click();
      },
      false
    );
  }
}

// 评论提交按钮
push.addEventListener("click", function (e) {
  // 防止默认行为（如果有的话）
  e.preventDefault();

  if (
    commentFormInput.value.trim() !== "" &&
    commentFormTextarea.value.trim() !== ""
  ) {
    // 获取姓名
    localStorage.setItem("MessageName", commentFormInput.value);

    // 添加评论
    insertComments();

    // 清空
    commentFormInput.value = localStorage.getItem("MessageName");
    commentFormTextarea.value = "";

    // 先隐藏评论框
    postCommentButton.click();
  } else {
    if (commentFormInput.value.trim() === "") {
      commentFormInput.value = "";
    }
    commentFormTextarea.value = "";
  }
});

// 提交评论信息
function insertComments() {
  // 获取 歌曲 id 值
  const commentFormInputSongId = +document.querySelector(
    ".comment-form>#songId"
  ).value;

  const commentsObject = {
    commenterName: commentFormInput.value,
    content: commentFormTextarea.value,
    publishedAt: getCurrentFormattedDateTime(),
    songId: commentFormInputSongId,
  };

  axios
    .post(API_BASE_URL + "/comments/", commentsObject)
    .then((res) => {
      if (res.data.msg === "评论成功") {
        selectComments(commentFormInputSongId);
      }
    })
    .catch((error) => {
      console.error("Error submitting comment:", error);
    });
}

// 关闭评论框按钮
closeButton.addEventListener("click", function () {
  postCommentButton.click();
});

// 获取评论信息
function selectComments(commentsId) {
  axios
    .get(API_BASE_URL + "/comments/" + commentsId)
    .then((res) => {
      // 解析数据并存储到对象中
      if (res.data.data) {
        commentsArr = res.data.data;
      } else {
        commentsArr = res.data.msg;
      }

      // 先移除
      removeAllComments();

      // 获取目标按钮元素
      const postCommentButton = document.querySelector("#postCommentButton");

      // 现在开始渲染
      if (commentsArr === "无查询到数据") {
        if (postCommentButton) {
          // 创建一个临时的文档片段来存储所有的评论容器
          const fragment = document.createDocumentFragment();

          const newCommentDiv = document.createElement("div");
          newCommentDiv.className = "comment-container";
          newCommentDiv.innerHTML = `
           <div id="no-comment"><span>快来发条评论吧</span></div>
          `;

          // 将新创建的评论容器添加到文档片段中
          fragment.appendChild(newCommentDiv);

          // 获取父元素
          const parentElement = postCommentButton.parentElement;

          // 如果父元素存在，则将所有评论容器一次性插入到按钮之前
          if (parentElement) {
            parentElement.insertBefore(fragment, postCommentButton);
          }
        }
      } else {
        if (postCommentButton) {
          // 创建一个临时的文档片段来存储所有的评论容器
          const fragment = document.createDocumentFragment();

          commentsArr.forEach((comment) => {
            const newCommentDiv = document.createElement("div");
            newCommentDiv.className = "comment-container";
            newCommentDiv.innerHTML = `
      <div class="comment-header">
        <img src="./images/avatar.jpg" alt="Avatar" class="comment-avatar">
      </div>
      <div class="comment-mid">
        <span class="comment-author">${comment.commenterName}</span>
        <div class="comment-content">
          ${replaceNewlinesWithBr(comment.content)}
        </div>
        <div class="comment-actions">
          <div class="left">
            <span class="comment-date">${formatTimeDifference(
              comment.publishedAt
            )}</span>
          </div>
          <div class="right">
            <span class="comment-action">👍</span>
            <span class="comment-action">💬</span>
            <span class="comment-action">🔗</span>
          </div>
        </div>
      </div>`;

            // 将新创建的评论容器添加到文档片段中
            fragment.appendChild(newCommentDiv);
          });

          // 获取父元素
          const parentElement = postCommentButton.parentElement;

          // 如果父元素存在，则将所有评论容器一次性插入到按钮之前
          if (parentElement) {
            parentElement.insertBefore(fragment, postCommentButton);
          }
        } else {
          console.error("无法找到 #postCommentButton 元素");
        }
      }
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}

// 移除所有评论容器的函数
function removeAllComments() {
  const commentContainers = document.querySelectorAll(".comment-container");
  commentContainers.forEach((container) => {
    container.remove();
  });
}

// 评论时间校验
function formatTimeDifference(publishedAt) {
  const now = new Date(); // 当前时间
  // 将输入的时间字符串分割为日期和时间部分
  const [datePart, timePart] = publishedAt.split(" ");
  const [year, month, day] = datePart.split("-").map(Number);
  const [hours, minutes] = timePart.split(":").map(Number);

  // 使用解析出的值创建Date对象
  const publishedDate = new Date(year, month - 1, day, hours, minutes);

  // 判断是否是昨天
  const yesterday = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate() - 1
  );
  if (
    publishedDate.getFullYear() === yesterday.getFullYear() &&
    publishedDate.getMonth() === yesterday.getMonth() &&
    publishedDate.getDate() === yesterday.getDate()
  ) {
    // 如果是昨天，显示“昨天”加具体时间（直接使用原始时间部分）
    return `昨天${timePart.substring(0, 5)}`; // 只取时分
  }

  // 计算时间差（以毫秒为单位）
  const diff = now - publishedDate;

  // 计算天数、小时数、分钟数
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const diffHours = Math.floor(
    (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const diffMinutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

  if (days > 7) {
    // 如果超过7天，直接返回原始的publishedAt字符串
    return publishedAt;
  } else if (days == 1) {
    // 如果正好是一天前
    return "1天前";
  } else if (days > 1) {
    // 如果超过24小时（即一天），显示几天前
    return `${days}天前`;
  } else if (diffHours >= 5) {
    // 如果超过5小时但不超过24小时，显示具体的时间（时分）
    return timePart.substring(0, 5); // 只取时分
  } else if (diffHours >= 1) {
    // 如果是一小时或更多小时内，但不超过5小时，返回具体的小时数
    return `${diffHours}小时前`;
  } else if (diffMinutes >= 1) {
    // 如果是1分钟到60分钟内
    return `${diffMinutes}分钟前`;
  } else {
    // 如果小于一分钟，也显示为1分钟前
    return `1分钟前`;
  }
}

// 替换 评论读取的换行符
function replaceNewlinesWithBr(text) {
  if (text == null) {
    return "";
  }
  // 使用正则表达式替换所有的换行符为<br>
  // \r\n - Windows风格换行符
  // \r   - 旧版Mac风格换行符
  // \n   - Unix风格换行符
  return text.replace(/(\r\n|\r|\n)/g, "<br>");
}

// 获取当前时间函数
function getCurrentFormattedDateTime() {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");

  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 播放函数
function audioPlay() {
  audio
    .play()
    .then(() => {
      // 自动播放成功
    })
    .catch((error) => {
      // 捕获并处理错误
      console.warn("%c 歌曲缓存中···:", "color: goldenrod;", error);
    });
}
